<template>
  <el-dialog title="分配角色权限" :visible.sync="showDialog" width="30%">
    <el-tree
      ref="tree"
      :data="list"
      :props="{ label: 'name' }"
      show-checkbox
      node-key="id"
      :default-checked-keys="defaultCheck"
    />
    <span slot="footer">
      <el-button size="mini" type="primary" @click="btnOK">确认</el-button>
      <el-button size="mini" @click="showDialog = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getRoleInfo, assignPrem } from '@/api/settings'
import { getPermissionList } from '@/api/permisson'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'SetAuth',
  data() {
    return {
      list: [],
      showDialog: false,
      defaultCheck: [],
      roleId: null
    }
  },
  methods: {
    // 获取列表
    async getPermissionList() {
      this.list = tranListToTreeData(await getPermissionList(), '0')
      this.showDialog = true
    },
    // 获取当前角色的权限
    async getRoleAuth(id) {
      this.roleId = id
      const { permIds } = await getRoleInfo(id)
      this.defaultCheck = permIds
    },
    // 提交事件
    async btnOK() {
      // 打钩的数据/半打钩的数据
      const permIds = this.$refs.tree.getCheckedKeys()
      if (permIds.length === 0) {
        return this.$message.warning('请勾选权限')
      }
      // 发送请求
      await assignPrem({
        id: this.roleId,
        permIds
      })
      // 提示成功
      this.$message.success('设置权限成功')
      this.showDialog = false
    }
  }
}
</script>
<style></style>
